<script setup lang="ts">
import {computed, h} from 'vue'
import {hasPermission} from '@/utils'
import CustomIcon from '@/components/CustomIcon'
import type {DropdownOption} from 'naive-ui'


type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error';
type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
type AnyObject = Record<string, unknown>;


interface ActionItem extends AnyObject {
  key?: string | number;
  label: string;
  icon?: string;
  permission?: string;
  popConfirm?: Recordable;
  text?: boolean;
  size?: ButtonSize;
  type?: ButtonType;
  isShow?: boolean;
  disabled?: boolean;
}

interface MoreActions {
  actions: ActionItem[];
  size?: string;
  theme?: string;
  text?: boolean;
  label?: string;
  trigger?: string;
  type?: ButtonType;
  showIcon: boolean;
  disabled: boolean;
}

const props = defineProps<{
  actions: ActionItem[];
  moreAction?: MoreActions;
}>();

// 有权限显示
const checkPermission = (permission?: string) => {
  if (permission === undefined) {
    return true;
  } else {
    return hasPermission(permission);
  }
};

// 过滤后的 actions
const filteredActions = computed(() =>
  props.actions.filter(
    act => checkPermission(act.permission) && (act.isShow === undefined || act.isShow)
  )
);

// 过滤后的 more.actions
const filteredMoreActions = computed(() =>
  props.moreAction?.actions?.filter(
    act => checkPermission(act.permission) && (act.isShow === undefined || act.isShow)
  ) ?? []
);
//处理下拉菜单图标渲染
const renderDropdownIcon = (option: DropdownOption) => {
  if (option.icon) {
    return h(CustomIcon, {component: option.icon})
  } else {
    return '';
  }
}
</script>

<template>
  <div>
    <n-flex>
      <template v-for="act in filteredActions" :key="act.key || act.label">
        <template v-if="act.popConfirm">
          <n-popconfirm v-bind="act.popConfirm" :positive-text="act.popConfirm.positiveText||'确定'"
                        placement="top-end"
                        style="max-width: 300px">
            <template #icon>
              <custom-icon component="ant-QuestionCircleFilled"/>
            </template>
            <template #trigger>
              <n-button :size="act.size||'small'" :type="act.type || 'default'"
                        :text="act.text ||  act.text==undefined?true:false" :disabled="act.disabled || false">
                <template #icon v-if="act.icon">
                  <custom-icon :component="act.icon"/>
                </template>
                {{ act.label }}
              </n-button>
            </template>
            {{ act.popConfirm.content }}
          </n-popconfirm>
        </template>
        <template v-else>
          <n-button v-bind="act" :size="act.size||'small'" :type="act.type || 'default'"
                    :text="act.text ||  act.text==undefined?true:false">
            <template #icon v-if="act.icon">
              <custom-icon :component="act.icon"/>
            </template>
            {{ act.label }}
          </n-button>
        </template>
      </template>
      <!--   更多操作   -->
      <template v-if="props.moreAction && filteredMoreActions.length">
        <n-dropdown :trigger="props.moreAction.trigger || 'click'" :options="filteredMoreActions"
                    v-bind="props.moreAction" style="min-width: 80px"
                    show-arrow
                    :render-icon="renderDropdownIcon"
                    :size="props.moreAction.size ||'small'">
          <n-button :size="props.moreAction.size||'small'"
                    class="more-btn"
                    icon-placement="right"
                    :type="props.moreAction.type || 'default'"
                    :text="props.moreAction.text || props.moreAction.text==undefined?true:false">
            {{ props.moreAction.label || '更多' }}
            <template #icon
                      v-if="props.moreAction.showIcon || props.moreAction.showIcon==undefined">
              <custom-icon component="carbon-CaretDown"/>
            </template>
          </n-button>
        </n-dropdown>
      </template>
    </n-flex>
  </div>
</template>

<style scoped lang="scss">
.more-btn {
  :deep(.n-button__icon) {
    margin-left: 2px !important;
  }
}
</style>
